<template>
  <el-container>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" label-position="left"
             class="demo-ruleForm" size="small">
      <el-form-item label="名称" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item label="最低消费" prop="min_price">
        <el-input v-model="ruleForm.min_price" placeholder="请输入最低消费">
          <template slot="append">元</template>
        </el-input>
      </el-form-item>

      <el-form-item label="抵扣金额" prop="price">
        <el-input v-model="ruleForm.price" placeholder="请输入抵扣金额">
          <template slot="append">元</template>
        </el-input>
      </el-form-item>

      <el-form-item label="总数" prop="number">
        <el-input v-model="ruleForm.number" placeholder="请输入数量"></el-input>
      </el-form-item>

      <el-form-item label="类型">
        <el-radio v-model="ruleForm.type" label="1" border>普通优惠券</el-radio>
        <el-radio v-model="ruleForm.type" label="2" border>注册首单优惠券</el-radio>
        <el-radio v-model="ruleForm.type" label="3" border>转发优惠券</el-radio>
      </el-form-item>

      <el-form-item label="开始时间" prop="start_time">
        <el-date-picker
          v-model="ruleForm.start_time"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="请选择开始时间"
          editable="false"
          align="right">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="结束时间" prop="end_time">
        <el-date-picker
          v-model="ruleForm.end_time"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="请选择结束时间"
          editable="false"
          align="right">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即保存</el-button>
        <!--<el-button @click="resetForm('ruleForm')">重置</el-button>-->
        <el-button @click="goBack()">返回</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>

<script>
  export default {
    mounted() {
      let _this = this;
      var attrs = this.$attrs;
      if (attrs.methodType == this.constant.EDITORMETHOD) {
        this.api.getCoupon({
          id: attrs.id
        }).then(function (res) {
          if (res.code == 1) {
            _this.ruleForm = res.data;
          }
        }).catch(function (error) {
          throw new Error(error);
        });
      }
    },
    methods: {
      goBack: function () {
        this.$router.go(-1)
      },
      submitForm(formName) {
        let _this = this;
        let attrs = this.$attrs;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (attrs.methodType == this.constant.ADDMETHOD) {
              _this.api.insertCoupon(_this.ruleForm).then(function (res) {
                if (res.code == 1) {
                  _this.goBack();
                  _this.$message({
                    showClose: true,
                    message: res.msg,
                    type: 'success',
                  });
                } else {
                  _this.$message({
                    showClose: true,
                    message: res.msg,
                    type: 'warning'
                  });
                }
              }).catch(function (error) {
                throw new Error(error);
              });
            } else if (attrs.methodType == this.constant.EDITORMETHOD) {
              _this.api.updateCoupon(_this.ruleForm).then(function (res) {
                if (res.code == 1) {
                  _this.goBack();
                  _this.$message({
                    showClose: true,
                    message: res.msg,
                    type: 'success',
                  });
                } else {
                  _this.$message({
                    showClose: true,
                    message: res.msg,
                    type: 'warning'
                  });
                }
              }).catch(function (error) {
                throw new Error(error);
              });
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    data() {
      return {
        ruleForm: {
          id: null,                //类型：Number  必有字段  备注：键值
          name: '',                //类型：String  必有字段  备注：名称
          min_price: '',                //类型：String  必有字段  备注：最小金额
          price: '',                //类型：String  必有字段  备注：奖励金额
          start_time: '',                //类型：String  必有字段  备注：开始时间
          end_time: '',                //类型：String  必有字段  备注：结束时间
          type: '1',                //类型：Number  必有字段  备注：1:普通优惠券2:注册首单优惠券3:转发优惠券
          number: '',                //类型：Number  必有字段  备注：数量
        },
        rules: {
          name: [
            {required: true, message: '请输入名称', trigger: 'blur'},
          ],
          min_price: [
            {required: true, message: '请输入最低消费', trigger: 'blur'},
          ],
          price: [
            {required: true, message: '请输入抵扣金额', trigger: 'blur'},
          ],
          start_time: [
            {required: true, message: '请选择开始时间', trigger: 'blur'},
          ],
          end_time: [
            {required: true, message: '请选择结束时间', trigger: 'blur'},
          ],
          number: [
            {required: true, message: '请输入数量', trigger: 'blur'},
          ],
        },
      }
    },
  }
</script>

<style scoped>
  .el-container {
    display: block;
  }

  .el-form {
    width: 1000px;
    margin: 15px 0 15px 30px;
  }

  /* 图片上传 */
  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    width: 178px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
